<template>
    <div class="table">
        <el-table :data="reviewerList?.items" stripe border>
            <el-table-column prop="id" label="ID" show-overflow-tooltip width="100"></el-table-column>
            <el-table-column prop="title" label="标题" show-overflow-tooltip width="250"></el-table-column>
            <el-table-column prop="typeName" label="类型" width="60"></el-table-column>
            <el-table-column label="状态" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.status==1" type="primary">待审核</el-tag>
                    <el-tag v-if="scope.row.status==2" type="warning">自动审核中</el-tag>
                    <el-tag v-if="scope.row.status==3" type="warning">人工审核中</el-tag>
                    <el-tag v-if="scope.row.status==4" type="danger">被驳回</el-tag>
                    <el-tag v-if="scope.row.status==5" type="success">已通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="failReason" label="上次驳回原因" show-overflow-tooltip width="280"></el-table-column>
            <el-table-column prop="failOrPassTime" label="最后审核时间" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column label="申请时间" show-overflow-tooltip>
                <template #default="scope">
                    {{scope.row.createTime}}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" :disabled="buttonDisable" @click="async()=>{await getImgAndVideoUrl(scope.row.id);showPreview=true}">查看</el-button>
                    <el-button type="success"  size="small" :disabled="buttonDisable || scope.row.status===5" @click="updateStatus(scope.row,5)">通过</el-button>
                    <el-button type="danger" size="small" :disabled="buttonDisable || scope.row.status===4" @click="chooseRow=scope.row;showFailReasonInput=true">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <div class="pagination">
        <el-pagination layout="prev, pager, next" v-model:current-page="reviewerParm.pageNo" :page-count="Number.parseInt(reviewerList?.page ?? '0')" @update:current-page="getReviewerList()" />
    </div>

    <el-dialog v-model="showFailReasonInput" title="驳回原因" width="400px">
        <el-input v-model="chooseRow.failReason"></el-input>
        <el-button style="margin-top: 20px;" type="danger" @click="updateStatus(chooseRow,4)">确认</el-button>
    </el-dialog>


    <el-dialog v-model="showPreview" v-if="showPreview">
        <PreviewVideo :imageUrl="imageAndVideoUrl.imageUrl" :videoUrl="imageAndVideoUrl.videoUrl"></PreviewVideo>
    </el-dialog>
</template>

<script setup lang="ts">
    import Page from '@/base/page';
    import { onMounted,watch,ref } from 'vue';
    import Review from '@/types/reviewer/Review'
    import ReviewListParm from '@/types/reviewer/ReviewListParm'
    import request from '@/base/request';
    import { ElMessage } from 'element-plus';
    import PreviewVideo from '@/components/reviewer/previewVideo.vue'
    const showPreview=ref(false)
    const buttonDisable=ref(false)
    const chooseRow=ref()
    const showFailReasonInput=ref(false)
    const imageAndVideoUrl=ref({
        imageUrl:'',
        videoUrl:''
    })
    const reviewerParm=ref<ReviewListParm>({
        pageNo:1,
        pageSize:10
    })
    const reviewerList=ref<Page<Review>>()

    const getReviewerList=async ()=>{
        const response=(await request.post(`/video/reviewer/getReviewList`,reviewerParm.value)).data
        if(response.code==200){
            reviewerList.value=response.data
        }else{
            ElMessage.error(response.msg)
        }
    }

    const getImgAndVideoUrl=async (id)=>{
        buttonDisable.value=true;
        try{
            const response=(await request.get(`/video/reviewer/getVideoAndImageUrl?id=${id}`)).data
            if(response.code==200){
                imageAndVideoUrl.value=response.data
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisable.value=false;
        }
    }

    const updateStatus=async (row,status)=>{
        row.status=status
        buttonDisable.value=true;
        const response=(await request.post(`/video/reviewer/updateVideo`,row)).data
        if(response.code==200){
            ElMessage.success("修改成功")

        }else{
            ElMessage.error(response.msg)
        }
        getReviewerList()
        buttonDisable.value=false;
        showFailReasonInput.value=false;
    }


    onMounted(()=>{
        getReviewerList()
    })
</script>


<style scoped>

    .pagination{
        text-align: center;
        margin-left: 70vh;
    }

    :deep .el-table__row {
        height: 50px;
    }

</style>